<template>
  <div class="csii-dynamic-form order_content">
    <div class="order_info" :style="{ 'text-align': config.titleAlign }">
      {{ config.title }}
    </div>

    <el-form
      ref="form"
      class="order_form"
      :label-width="config.labelWidth"
      :model="model"
      :rules="rules"
    >
      <csii-dynamic-form-group
        :key="idx"
        :title="group.title"
        :titleAlign="group.titleAlign"
        v-for="(group, idx) in config.groups"
      >
        <csii-dynamic-form-item
          :key="subIdx"
          v-model="model[control.key]"
          :control="control"
          v-for="(control, subIdx) in group.controls"
        ></csii-dynamic-form-item>
      </csii-dynamic-form-group>

      <div class="order_agree">
        <el-checkbox v-model="checked" class="agreeOrRefuse"></el-checkbox
        >本人已阅读并知晓 <a>《上海银行信用卡章程》</a>、
        <a>《上海银行信用卡领用合约》</a>、 <a>《上海银行信用卡收费标准》</a>、
        <a>《重要提示》</a>、
        <a>《声明、授权及签署》</a
        >所载内容，并授权上海银行对本人中国人民银行金融信用信息基础数据库等征信情况、申领信息真实性及其他有关方面的情况进行查询。
      </div>
      <div class="buttonDiv">
        <el-button
          type="primary"
          size="medium"
          @click.native="submit('form')"
          class="btn-next"
          >下一步</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import FormGroup from "./FormGroup";
import FormItem from "./FormItem";

export default {
  name: "csii-dynamic-form",

  components: {
    [FormGroup.name]: FormGroup,
    [FormItem.name]: FormItem
  },

  props: {
    config: {
      type: Object,
      required: true
    }
  },

  watch: {
    config: {
      deep: false,
      immediate: true,
      handler(newVal) {
        const config = this.deepClone(newVal);
        const groups = config ? config.groups : [];

        // 初始化表单数据模型、表单验证规则
        for (let i = 0; i < groups.length; i++) {
          const controls = groups[i].controls || [];
          for (let i = 0; i < controls.length; i++) {
            const control = controls[i];
            if (control.key) {
              this.model[control.key] = control.value;
              this.rules[control.key] = control.rules || [];
            }
          }
        }
      }
    }
  },

  data() {
    return {
      checked: false,
      model: {},
      rules: {}
    };
  },

  methods: {
    deepClone(obj = {}) {
      const newObj = {};
      for (const propName in obj) {
        if (obj.hasOwnProperty(propName)) {
          const value = obj[propName];

          if (Object.prototype.toString.call(value) === "[object Object]") {
            newObj[propName] = this.deepClone(value);
          } else {
            newObj[propName] = value;
          }
        }
      }

      return newObj;
    },
    submit(formRef) {
      if (!this.checked) {
        this.$alert("请先阅读相关协议。", "温馨提示", { center: true });
        return;
      }

      const $ref = this.$refs[formRef];
      if (!$ref) {
        return;
      }
      $ref.validate(valid => {
        if (valid) {
          this.$emit("on-submit", this.model);
        }
      });
    }
  }
};
</script>

<style scoped>
.page_container {
  margin: 5px 10px;
  width: 100%;
}
.page_h {
  font-size: 20px;
  width: 100%;
  display: block;
  text-align: left;
  padding-left: 10px;
  color: #6680cc;
  position: relative;
  line-height: 35px;
  border-bottom: 2px solid #6680cc;
}

.page_h::after {
  display: block;
  content: "";
  width: 1px;
  height: 18px;
  border-left: 2px solid #6680cc;
  position: absolute;
  top: 8px;
  left: 0;
}
.order_header {
  width: 100%;
  height: 200px;
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
  text-align: center;
}

.order_header .t1 {
  font-weight: bold;
  font-size: 16px;
  line-height: 22px;
}
.order_header .t2 {
  font-size: 12px;
}
.order_header .t3 {
  color: #6680cc;
  font-size: 12px;
}

.order_header .activity img {
  height: 140px;
}

.page_steps {
  border: 1px solid #dedede;
  border-radius: 5px;
  text-align: left;
  padding: 10px 50px;
}
.order_content {
  border: 1px solid #dedede;
  border-radius: 5px;
  margin: 10px 0;
  padding: 10px;
}

.order_content .order_info {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
}
.order_form {
  width: 600px;
}
.order_form .order_title {
  font-size: 16px;
  font-weight: bold;
  text-align: left;
  line-height: 48px;
}
.order_agree {
  text-align: left;
}
.order_agree a {
  color: #6680cc;
}
.buttonDiv {
  line-height: 60px;
  text-align: center;
}
.agreeOrRefuse {
  margin-right: 10px;
}
</style>
